<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearFilters"
    />
    <div v-if="meta.indexOf('MsgSaveOrUpdate') > -1" class="mb20">
      <el-button type="primary" @click="handleEdit()">新增</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="标题名称"
        prop="title"
        min-width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="primaryColor pointer" @click="handleDetail(scope.row)">{{
            scope.row.title
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="内容"
        prop="content"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="消息类型"
        prop="typeName"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="通知商户/场馆/小程序"
        prop="recipientsNum"
        min-width="160"
        show-overflow-tooltip
      >
        <!-- <template v-slot="scope">
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
          >
            <div class="Info_wrap">
              <div
                v-for="item in scope.row.recipientsInfo"
                :key="item"
                style="padding: 6px 2px"
              >
                {{ item }}
              </div>
            </div>
            <span slot="reference" class="primaryColor pointer">{{ scope.row.recipientsNum }}</span>
          </el-popover>
        </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        label="创建时间"
        prop="createTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="发布人"
        prop="creator"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="发布时间"
        prop="publishTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="发布状态"
        prop="isPublishName"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        min-width="160"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('MsgSaveOrUpdate') > -1 && scope.row.isPublish == '0'"
              v-preventReClick
              type="text"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="meta.indexOf('MsgHandle') > -1 && scope.row.isPublish == '0'"
              v-preventReClick
              type="text"
              @click="handlePublish(scope.row)"
            >发布</el-button>
            <el-button
              v-if="meta.indexOf('MsgHandle') > -1"
              v-preventReClick
              type="text"
              class="red"
              @click="handleDel(scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />

    <Model v-model="isShowShops">
      <div class="Info_wrap">
        <div
          v-for="item in activeItem.recipientsInfo"
          :key="item"
          style="padding: 6px 2px"
        >
          {{ item }}
        </div>
      </div>
    </Model>

    <Edit
      v-if="isShowEdit"
      ref="EditRef"
      @success="getList"
      @close="isShowEdit = false"
    />
    <Detail v-if="isShowDetail" ref="DetailRef" @close="isShowEdit = false" />
  </div>
</template>

<script>
import { Messagelist, MessageHandle } from '@/api'
import { propList, queryFormConfig, rules } from './config'
import QueryForm from '@/components/QueryForm'
import Model from '@/components/Model'
import Edit from './edit.vue'
import Detail from './detail.vue'
export default {
  components: {
    QueryForm,
    Edit,
    Model,
    Detail
  },
  data() {
    return {
      propList,
      queryFormConfig,
      rules,
      listLoading: false,
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},

      isShowEdit: false,
      isShowDetail: false,
      isShowShops: false,
      activeItem: {}
    }
  },
  created() {
    this.getList()
    this.meta = this.$route.meta.buttons || []
    // this.getVenueList()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    handleInfo(row) {
      this.isShowShops = true
      this.activeItem = row
    },
    handleEdit(row) {
      this.isShowEdit = true
      this.$nextTick(() => {
        // this.$refs.DetailRef.isDetail = false
        this.$refs.EditRef.isShowModel = true
        if (row && row.id) {
          this.$refs.EditRef.getDetail(row.id)
        }
      })
    },
    handleDetail(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.DetailRef.isDetail = true
        this.$refs.DetailRef.isShowModel = true
        if (row && row.id) {
          this.$refs.DetailRef.getDetail(row.id)
        }
      })
    },
    handleDel(row) {
      this.$confirm('此操作删除该消息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          MessageHandle({ param: { id: row.id, type: '2' }})
            .then(res => {
              if (res.errorCode !== '000000') return
              this.$message.success('删除成功')
              this.getList()
            })
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    handlePublish(row) {
      this.$confirm('此操作发布该消息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          MessageHandle({ param: { id: row.id, type: '1' }})
            .then(res => {
              if (res.errorCode !== '000000') return
              this.$message.success('发布成功')
              this.getList()
            })
        })
    },
    getList(page) {
      const { pagination, filters: param } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      this.listLoading = true
      Messagelist({ pagination, param }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList.map(i => {
            i.typeName = i.type === '1' ? '商户类型' : i.type === '2' ? '场馆消息' : '小程序消息'
            i.isPublishName = i.isPublish === '1' ? '已发布' : '未发布'
            return i
          })
          this.total = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 清空筛选项
    clearFilters() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.Info_wrap {
  padding: 6px 12px;
  text-align: center;
  border-radius: 6px;
}
</style>
